<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>methods</title>
</head>

<body>
    <div id="app">
        <!-- 渲染DOM -->
        <h1 style="color: seagreen;">{{title}}</h1>
        <h2>Title : {{name}}</h2>
        <h2>Topic : {{topic}}</h2>
        <!-- 调用方法中的函数 -->
        <h2>{{show()}}</h2>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    title: "Geeks for Geeks",
                    name: "Vue.js",
                    topic: "Instances"
                }
            },
            // 创建方法
            methods: {
                // 创建函数
                show: function () {
                    return "欢迎尝试这个Vue例子11111111 "
                        + this.name + " - " + this.topic;
                }
            }
        }).mount(' #app');
    </script>
</body>

</html>